<template>
	<div>
		<div class="banner-box" :style="{backgroundImage:'url('+require('@/assets/banner.jpg')+')'}"></div>
		<div class="nav-box">
			<div class="nav-content-box">
				<div class="nav-left-box">
					<el-menu class="el-menu-demo" default-active="4-3" mode="horizontal"
						background-color="rgb(13, 73, 154)" text-color="#fff" @select="handleSelect"
						active-text-color="#fff" ellipsis-icon="">
						<el-menu-item index="1">首页</el-menu-item>
						<el-sub-menu index="2">
							<template #title>展览介绍</template>
							<el-menu-item index="2-1">组织结构</el-menu-item>
							<el-menu-item index="2-2">社会背景</el-menu-item>
							<el-menu-item index="2-3">招商方案</el-menu-item>
						</el-sub-menu>
						<el-sub-menu index="3">
							<template #title>同期活动</template>
							<el-menu-item index="3-1">全球IC企业家大会</el-menu-item>
							<el-menu-item index="3-2">中国AI产业生态论坛</el-menu-item>
						</el-sub-menu>
						<el-sub-menu index="4">
							<template #title>展商服务</template>
							<el-menu-item index="4-1">参展申请</el-menu-item>
							<el-menu-item index="4-2">市场宣传服务</el-menu-item>
							<el-menu-item index="4-3">展商中心登录</el-menu-item>
							<el-menu-item index="4-4">参展商名录</el-menu-item>
							<el-menu-item index="4-5">展位图</el-menu-item>
							<el-menu-item index="4-6">接待\酒店服务</el-menu-item>
						</el-sub-menu>
						<el-sub-menu index="5">
							<template #title>观众服务</template>
							<el-menu-item index="5-1">观众预登记</el-menu-item>
							<el-menu-item index="5-2">参展商名录</el-menu-item>
							<el-menu-item index="5-3">展位图</el-menu-item>
							<el-menu-item index="5-4">参观指南</el-menu-item>
							<el-menu-item index="5-5">接待\酒店服务</el-menu-item>
						</el-sub-menu>
						<el-menu-item index="6">联系我们</el-menu-item>
					</el-menu>
				</div>
				<div class="nav-right-box">
					<a href="https://www.ic-china.com.cn/filedownload/803742">English</a>
				</div>
			</div>
		</div>
		<div class="address-box">
			<div class="address-content-box">
				<div class="address-home-pic">
					<img src="../assets/home.png" alt="">
				</div>
				<div>
					<span>您当前所在位置：</span>
				</div>
				<div class="address-index-font">
					<a>首页</a>
				</div>
				<div>
					<img class="icon-pic" src="../assets/icon.png" alt="" />
				</div>
				<div class="address-item-box">
					<span>展商登录中心</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HeaderComponent',
		props: {
			msg: String
		},
		data() {
			return {};
		},
		methods: {
			handleSelect(key) {
				let url = 'https://www.ic-china.com.cn/sy';

				switch (key) {
					case '1':
						url = 'https://www.ic-china.com.cn/sy';
						break;
					case '2' || '2-2':
						url = 'https://www.ic-china.com.cn/zhbj';
						break;
					case '2-1':
						url = 'https://www.ic-china.com.cn/zzjg';
						break;
					case '2-3':
						url = 'https://www.ic-china.com.cn/zsfa';
						break;
					case '3' || '3-1':
						url = 'https://www.ic-china.com.cn/icqyjdh';
						break;
					case '3-2':
						url = 'https://www.ic-china.com.cn/zgaicystlt';
						break;
					case '4' || '4-1':
						url = 'https://www.ic-china.com.cn/czsq';
						break;
					case '4-2':
						url = 'https://www.ic-china.com.cn/scxcfw';
						break;
					case '4-3':
						url = '';
						break;
					case '4-4' || '5-2':
						url = 'https://www.ic-china.com.cn/zwtzsfw';
						break;
					case '4-5':
						url = 'https://www.ic-china.com.cn/jd_jdfw';
						break;
					case '5-1':
						url = 'https://ty.myhuiyi.com/Pre-registration/1199/qaa.html?ly=&qd=';
						break;
					case '5-3':
						url = '';
						break;
					case '5-4':
						url = 'https://www.ic-china.com.cn/jd_jdfw_09181713_620';
						break;
					case '6':
						url = 'https://www.ic-china.com.cn/lxwm';
						break;
				}

				window.location.href = url;
			},
		},
	}
</script>

<style>
	.el-menu {
		border: 0
	}

	.el-menu .el-menu-item.is-active {
		background: rgb(0, 102, 173) !important;
		color: #fff;
	}

	.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
		border-bottom: 0;
	}

	.el-menu-vertical li {
		width: 220px !important;
		text-align: left;
		display: inherit;
		height: 55px;
		line-height: 3;
		border-bottom: 1px #eee dashed;
	}

	.el-menu-vertical {
		width: 220px;
		margin: auto;
		margin-top: 10px;
	}

	.icon-pic {
		margin-top: 2px;
	}

	.address-item-box {
		color: #999
	}

	.address-content-box div {
		float: left;
		margin-left: 10px;
	}

	.address-index-font {
		margin-left: 20px !important;
	}

	.address-box {
		width: 100%;
		margin: auto;
		background-color: #f5f5f5;
		height: 50px;
	}

	.address-home-pic {
		width: 20px;
		height: 20px;
		float: left
	}

	.address-home-pic img {
		width: 100%;
		height: 100%;
	}

	.address-content-box {
		width: 1220px;
		margin: auto;
		font-size: 14px;
		line-height: 1.7;
		overflow: hidden;
		padding-top: 15px
	}

	.banner-box {
		width: 100%;
		height: 320px;
		background-position: 50% 50%;
		background-size: cover;
	}

	.nav-box {
		width: 100%;
		background-color: rgb(13, 73, 154);
		overflow: hidden;
	}

	.nav-content-box {
		width: 1220px;
		margin: auto;
		background-color: rgb(13, 73, 154)
	}

	.el-menu--horizontal.el-menu {
		border-bottom: 0px;
		height: 56px;
		width: 830px;
		padding-left: 1%;
	}

	.el-menu--horizontal>.el-menu-item.is-active {
		border-bottom: 0px;
	}

	.el-menu li {
		font-size: 16px !important;
		font-family: 'Noto Sans CJK';
		width: 15%;
	}

	.el-sub-menu__title {
		font-size: 16px !important;
		font-family: 'Noto Sans CJK';
		border-bottom: 0px;
	}

	.el-sub-menu .el-sub-menu__icon-arrow {
		display: none;
	}

	.nav-left-box {
		width: 850px;
		float: left;
	}

	.nav-right-box {
		width: 105px;
		float: right;
		color: #fff;
		font-size: 14px;
		margin-top: 18px;
	}

	.nav-right-box a {
		color: #fff;
		text-decoration: none;
	}

	.el-menu--horizontal {
		border-right: 0px;
	}

	.el-menu--horizontal>.el-sub-menu .el-sub-menu__title {
		border-bottom: 0;
	}

	.el-menu--horizontal>.el-menu-item {
		border-bottom: 0;
	}

	.el-popper.is-light {
		border: 0;
	}

	.el-menu--popup {
		min-width: 120px;
		background-color: #fff;
		padding: 0;
		--el-menu-hover-bg-color: #0066AD !important
	}

	.el-menu-item {
		padding: 0 var(--el-menu-base-level-padding) !important
	}

	.el-popper.is-pure {
		margin-top: -7px;
	}

	.el-menu-item {
		font-size: 14px;
	}

	.el-menu--horizontal .el-menu .el-menu-item,
	.el-menu--horizontal .el-menu .el-sub-menu__title {
		color: #383838;
		background-color: #fff;
		font-size: 14px !important;
		width: 100%;
	}

	:root {
		--el-menu-active-color: var(--el-color-primary);
		--el-menu-text-color: var(--el-text-color-primary);
		--el-menu-hover-text-color: var(--el-color-primary);
	}
</style>